<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue3 响应式原理</title>
</head>
<body>
<button id="btn">点击 +1</button>
<div id="app"></div>



<script type="module">
    import {reactive, effect} from "./01-index.js";

    const app = document.getElementById('app')
    const btn = document.getElementById('btn')

    const state = reactive({count: 0})

    // 这里其实就相当于我们在写模板
    effect(() => {
        app.textContent = state.count
    })
    btn.addEventListener('click', () => {
        state.count++;
        console.log("state.count ====>", state.count)
    })
</script>
</body>
</html>